<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>发布文章</title>
    <!--semantic-ui-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link th:href="@{/qinjiang/css/qinstyle.css}" rel="stylesheet">
    <!--Editor.md-->
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
</head>
<body>


<!--主容器-->
<div class="ui container">

    <div th:replace="~{/commons/common::nav-menu(active='blog.html')}"></div>

    <!--中间主体-->
    <div class="ui grid">
        <div class="row">
            <div class="column">
                <div class="ui segment">
                    <div class="content">
                        <!--表单提交处理！-->
                        <form th:action="@{/blog/addArticle}" method="post">
                            <div class="ui form">
                                <div class="inline fields">
                                    <!--title-->
                                    <div class="twelve wide field">
                                        <label>Title</label>
                                        <input type="text" placeholder="狂神" name="title">
                                        <input type="hidden" placeholder="狂神" name="author"
                                               th:value="${session.loginUser.getName()}">
                                        <input type="hidden" placeholder="狂神" name="createTime"
                                               th:value="${#dates.format(#dates.createToday(),'yyyy-MM-dd')}">
                                    </div>
                                    <!--tag-->
                                    <div class="two wide field">
                                        <select name="tag">
                                            <option th:value="${tag.getId()}" th:each="tag:${tags}">[[${tag.getTagName()}]]</option>
                                        </select>
                                    </div>
                                    <!--提交按钮-->
                                    <div class="two wide field">
                                        <input type="submit" class="ui blue submit button"/>
                                    </div>
                                </div>
                            </div>

                            <!--富文本编辑器-->
                            <div class="ui segment">
                                <div id="article-content">
                                    <textarea name="content" id="content" style="display:none;"> </textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>


</div>

<script th:src="@{/qinjiang/js/jquery-3.1.1.min.js}"></script>
<script th:src="@{/qinjiang/js/semantic.min.js}"></script>
<script>
    //选项卡
    $('.menu .item').tab();
    $('.ui.checkbox').checkbox(); //复选框
    $('select.dropdown').dropdown();
</script>

<!--editormd-->
<script th:src="@{/editormd/editormd.min.js}"></script>

<script type="text/javascript">
    var testEditor;

    $(function () {
        testEditor = editormd("article-content", {
            width: "100%",
            height: 540,
            syncScrolling: "single",
            path: "../editormd/lib/",
            emoji: true,
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            //图片上传
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/blog/file/upload",

            /*指定需要显示的功能按钮*/
            toolbarIcons: function () {
                return ["undo", "redo", "|",
                    "bold", "del", "italic", "quote", "|",
                    "h1", "h2", "h3", "h4", "h5", "h6", "|",
                    "list-ul", "list-ol", "|",
                    "link", "image", "code", "preformatted-text",
                    "code-block", "table", "datetime", "emoji", "html-entities", "|",
                    "watch", "fullscreen"]
            }
        });
    });
</script>

</body>
</html>